<template>
  <div class="contain">
    <div class="title">
      数 据 字 典 维 护 系 统
    </div>
    <div class="zuo">
      <left @changeComponent="handleChangeComponent" @refreshDictForm="refreshDictForm" />
    </div>
    <div class="you">
      <component :is="currentComponent" ref="currentComponentRef" />
    </div>
  </div>
</template>

<script>
import left from './components/left.vue';
import MyContentComponent from './components/MyContentComponent.vue';
import contentOne from './components/content-one.vue';
import contentTwo from './components/content-two.vue';
export default {
  name: 'dictionary',
  components: {
    left,
    MyContentComponent,
    contentOne,
    contentTwo
  },
  data() {
    return {
      currentComponent: 'MyContentComponent'
    }
  },
  methods: {
    handleChangeComponent(componentName) {
      this.currentComponent = componentName;
    },
    refreshDictForm() {
      if (this.currentComponent === 'MyContentComponent') {
        this.$refs.currentComponentRef.refreshData();
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.contain {
  height: 100vh;
  width: 100%;
  background-color: #172227;
  display: flex;
  position: relative;

  .title {
    color: white;
    position: absolute;
    font-size: 23px;
    font-weight: bold;
    top: 10px;
    left: 42%;
    z-index: 99;
    font-family: 'ziti', sans-serif;
  }

  .zuo {
    padding-top: 45px;
    width: 8%;
    height: 100%;
    margin-left: 10px;
    margin-top: 10px;
    border-right: 1px solid #234564;
  }

  .you {
    padding-top: 45px;
    width: 92%;
    height: 100%;
    margin-left: 20px;
    margin-top: 10px;

  }
}
</style>